<template>
    <router-link to="/app-AAA">
        <a-card class="Card" hoverable :bodyStyle="{
            padding: token.paddingXS * 1.5 + 'px'
        }">
            <a-flex gap="middle" :align="'center'">
                <div class="Icon" :style="{
                    borderRadius: token.borderRadius + 'px'
                }"></div>
                <a-typography-title :ellipsis="true" :style="{
                    margin: 0,
                    fontSize: '17px',
                    color: token.colorTextSecondary
                }" :level="5" :content="'应用名称'"></a-typography-title>
            </a-flex>
            <a-typography-paragraph :ellipsis="{ rows: 2 }" :style="{
                margin: token.marginXS + 'px 0',
                color: token.colorTextSecondary,
                height: '46px',
            }" content="测试备注正文测试备注正文测试备注正文测试备注正文测试备注正文测试备注正文测试备注正文测试备注正文测试备注正文" />

            <a-flex gap="middle" justify="space-between" :align="'center'">
                <a-tag color="success">已上线</a-tag>

                <a-dropdown placement="top" arrow>
                    <span class="More iconfont icon-gengduo" :style="{ color: token.colorTextSecondary }"></span>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item>
                                <router-link to="/app-AAA">
                                    <a href="javascript:;" :style="{ color: token.colorTextTertiary }">应用编辑</a>
                                </router-link>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;" :style="{ color: token.colorTextTertiary }">应用设置</a>
                            </a-menu-item>
                            <a-menu-divider />
                            <a-menu-item>
                                <a href="javascript:;" :style="{ color: token.colorError }">删除</a>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </a-flex>
        </a-card>
    </router-link>
</template>

<script setup>
// 基础引用
import { ref } from 'vue'
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();

</script>

<style lang="less" scoped>
.Card {
    height: 150px;

    &:hover {
        border-color: #4096ff
    }

    .More {
        margin-right: 4px;
        font-size: 20px;
        line-height: 20px;
    }

    .Icon {
        flex: none;
        width: 40px;
        height: 40px;
        background-color: bisque;
    }
}
</style>